<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= TITLE %></title>
<!--  <script async  src="es-module-shims.js"></script>-->


      <!--    <link-->
<!--      rel="stylesheet"-->
<!--      href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"-->
<!--    />-->
<!--    <link rel="stylesheet" href="./fFace.css">-->
<!--      <link href="/wangEditor.css" rel="stylesheet">-->

    <script src="/twig.min.js"></script>
    <script src="/jsplumb.js"></script>
    <link href="/server1/element-ui/index.css" rel="stylesheet">
   <link href="/font-awesome/css/index.css" rel="stylesheet">
<!--    <link href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.0.3/index.css" rel="stylesheet">-->
    <link href="/element-plus.2.0.4.css" rel="stylesheet">
<!--    <script src="/pinyin_dict_withtone.js"></script>-->
<!--    <script src="/pinyin_dict_polyphone.js"></script>-->
<!--    <script id="MathJax-script" async src="mathjax/tex-chtml.js"></script>-->
<!--    <script src="pinyin_dict_firstletter.js"></script>-->
    <script src="/pinyin_dict_notone.js"></script>
    <script src="/pinyinUtil.js"></script>
    <style>
      :root {
          --z-emoji-zoom: 0.7;
      }
    </style>

    [[[src/htmls/template.html]]]
  </head>
  <body>
  <script>
    ;(function () {
      function isElectron(parent) {
        return  globalThis.require
      }
      globalThis.IS_PARENT_ELECTRON = false
      if (isElectron(parent)) {
        globalThis.IS_PARENT_ELECTRON  = true;

        const {
          remote,
        } = globalThis.require('electron')
        const fs = window.require('fs')
        // console.log(remote)
        function openSaveDialog (configuration = {}) {
          return new Promise((resolve, reject) => {
            remote.dialog.showSaveDialog(remote.getCurrentWindow(),{
              filters: [{
                name: 'File',
                extensions: ['*'],
              }],
              defaultPath: configuration.fileName
            }).then((res) => {
              if (!res.canceled){
                if (res.filePath){
                  let path = res.filePath
                  resolve(path)
                }else {
                  resolve(null)
                }
              }
            });
          }).catch(e => {
            console.log("showSaveDialog失败="+e);
          })
        }
        globalThis.openElectronSaveDialog = openSaveDialog
        // globalThis.openElectronSaveDialog({
        //   fileName: 'sdsds.json5'
        // }).then(path => {
        //   console.log(path)
        //   fs.writeFileSync(path, 'sdsds')
        // })

        globalThis.useElectronSave = function (data = '', {fileName} = {}) {
          openSaveDialog({
            fileName: fileName
          }).then(path => {
            // console.log(path)
            fs.writeFileSync(path, data)
          })
        }

      }


    })();
    (function () {
      globalThis.importPublicFile = function (path) {
        return import(new URL(path, window.location.origin).href)
      }
    })();
  </script>

  [[[src/htmls/apptpl.ejs]]]

  [[[src/htmls/output-templates.html]]]


  [[[src/htmls/cmfield.twig]]]

<!--  <script src="<%= VITE_REMOTE_RES_ORIGIN %>/public/es-module-shims.js"></script>-->
<!--  <script type="module-shim" src="<%= VITE_REMOTE_RES_ORIGIN %>/public/init3.js"></script>-->
<script>


  class ZEmoji extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({mode: 'open'});
    }

    static get observedAttributes() {
      return ['face', 'zoom'];
    }

    render() {

      let style = `<style>


:host {
  --emoji-width: 30px;
  --emoji-height: 30px;
  --emoji-zoom: var(--z-emoji-zoom, 1);
  position: relative;
  display: inline-block;
  width: calc(var(--emoji-width) * var(--emoji-zoom));
  height: calc(var(--emoji-height) * var(--emoji-zoom));
}

.s_face {
    width: 30px;
    height: 30px;
    background: transparent url(./fFace.png) no-repeat scroll left top;
    position: absolute;
    zoom: var(--emoji-zoom, 1);
}

.s_face[face="fuck"] {
    display: inline-block;
    color: #000;
    font-size: 14px;
    text-decoration: none;
    background-position: left -300px;
    background-size: 100%;
}

</style>`

      function getZOOM(s) {
        let v =  parseFloat(s )
        if (Number.isNaN(v)) {
          return undefined
        }
        return v
      }


      let face = this.getAttribute('face')
      let zoom = getZOOM(this.getAttribute('zoom'))
      if (typeof zoom !== 'undefined') {
        let size = [30 * zoom, 30 * zoom]
        this.style.width = size[0] + 'px'
        this.style.height = size[1] + 'px'
        this.shadowRoot.innerHTML = `${style}<a face="${face}"
style="zoom: ${zoom}" class="s_face">&nbsp;</a>`
      } else {
        this.shadowRoot.innerHTML = `${style}<a face="${face}"
 class="s_face">&nbsp;</a>`
      }


    }

    attributeChangedCallback(name, oldValue, newValue) {
      // console.log(name, oldValue, newValue)
      this.render()
    }
  }

  window.customElements.define('z-emoji', ZEmoji);
</script>
<template id="bserviceTpl">
  <script>
    import { baseServiceDef, baseServiceMixin } from '[REMOTE]/baseService.js';

    export function install(vue) {
      // const ZY = global.ZY;
      return {
        template: '<div></div>',
        mixins: [
          baseServiceMixin,
        ],
        setup(props, ctx) {
          const config = ZY.JSON5.parse(`{$SELF_NAME:'ServicePage'}`);
          return baseServiceDef({ props, ctx, vue, config });
        },
      };
    }
  </script>
</template>
  <script id="formTpl" type="text/html">
    <div class="http-com comformscr2">
      {% verbatim %}{{ {% endverbatim %} parts {% verbatim %} }} {% endverbatim %}
      {% for part in CONFIG.parts %}
      {% set partConfigKey = 'config.parts[' ~ loop.index0 ~ '].def' %}
      {% set pathKey = "parts." ~ part.name %}
      {% set pathSKey = "'parts." ~ part.name ~ "'" %}
      {% set modelKey = pathKey ~ ".model"  %}
      {% if part.type == 'form' %}
      <view class="z-form http-com-part http-com-part__{{ part.name }}"
               ref="comformscr2__{{ part.name }}" :model="{{ pathKey }}.model"
      >
        {{ partStr[part.name] }}
        <slot-com :defs="slotContent" :attrs="{parts}"
                  :binds="{name: '{{ part.name }}', ctx: exportCtx,  partName: '{{ part.name }}', parts, process: '{{ CONFIG.process}}' }"
                  name="form_afterend"></slot-com>
      </view>
      {% endif %}
      {% endfor %}
    </div>
  </script>
    <div id="app"></div>
    <div id="storeApp"></div>
    <div id="devApp"></div>

    <div id="endofbody" style="position: fixed; left: 150px; bottom: 0; z-index: 111;"></div>

  <!-- 引入 js -->
  <script src="/wangeditor.js" async defer></script>
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js" async defer></script>-->
<!--  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"  async defer></script>-->

  [[[src/htmls/initapp.html]]]
  <script src="/jszip.min.js"></script>
  <script src="/docx-preview.js"></script>
  <script type="module" src="/src/main.js"></script>


  </body>
</html>
